<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>

		<style type="text/css">


       #divX {
  width:100px;
	height:100px;
	margin: 30px 8px 30px;
	background-color: pink;

	/*margin 外边据 , 会撑大容器
	   设置一个值: 四个方向
		 两个: 上下  左右
		 三个: 上  左右 下
		 四个: 上 右 左 下
		 */


}

#outBox {
 background-color: yellow;
 /*border: 1px solid black;*/
}

#box {
 background-color: red;
 border: 1px solid black;
}

	#div1 {

  background-color: green;
  margin: 100px;

	}

#div2 {

  background-color: pink;
  margin: 100px;

}

/*

margin注意的问题:
1.  margin-top或-bottom 会向父级传递,而且不会撑开父级;
    解决方法:
		 - 可以通过设置父级的border暂时解决;
		 - 还没学到....以后补充

2. 相邻控件的margin上下会叠压(以大值为合并基准)

*/



</style>

</head>
	<body>


<div id="outBox">
<div id="box">
	<div id="div1">
你好啊撒娇扩大搜救艰苦撒打算就 几句话
</div>

<div  id="div2">
姐啊四朵金花撒谎就好撒撒就
</div>

</div>

</div>
	</body>
</html>
